/* eslint-disable @typescript-eslint/no-use-before-define */
import CardList from "@/components/CardBox/index";
import { useEcharts } from "@/hooks/useEcharts";
import { getStyleVariable } from "@/hooks/usePublic";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
import { ElButton, ElInput, ElProgress, ElSelect } from "element-plus";
import "./css/device-list.scss";
// 设备总数
import img6 from "@/assets/images/iot/device/deviceInfo/6.png";
const deviceCount = defineComponent({
	setup() {
		const deviceCountEcharts = ref<HTMLElement>();
		const color = [getStyleVariable()];
		onMounted(() => {
			let myChart: echarts.ECharts = echarts.init(deviceCountEcharts.value as HTMLElement);
			let option: echarts.EChartsOption = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#6a7985"
						}
					}
				},
				grid: {
					left: -28,
					right: 0,
					bottom: -10,
					top: 10,
					containLabel: true
				},
				xAxis: [
					{
						show: false,
						type: "category",
						boundaryGap: false,
						data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
						axisLabel: {
							color: "#a1a1a1"
						}
					}
				],
				yAxis: [
					{
						show: false,
						type: "value",
						axisLabel: {
							color: "#a1a1a1"
						}
					}
				],
				color: color,
				series: [
					{
						name: "设备总数",
						type: "line",
						stack: "Total",
						areaStyle: {
							opacity: 0.2
						},
						lineStyle: {
							width: 3
						},
						showSymbol: false,
						smooth: true,
						emphasis: {
							focus: "series"
						},
						data: [120, 132, 101, 134, 90, 230, 210]
					}
				]
			};
			useEcharts(myChart, option);
		});
		const slot = {
			title: () => {
				return <div class="card-title-select active">本月</div>;
			}
		};
		return () => {
			return (
				<CardList titleHeight="58px" icon={img6} title="设备总数" v-slots={slot}>
					<div class="card-select">
						<span class="value">12364</span>
						<span class="desc">较昨日</span>
						<span class="num-label-up">+ 10</span>
					</div>
					<div ref={deviceCountEcharts} class="card-echarts"></div>
					<div class="card-footer">
						<span>本月新增设备</span>
						<span class="num">100台</span>
					</div>
				</CardList>
			);
		};
	}
});
// 在线设备
import img7 from "@/assets/images/iot/device/deviceInfo/7.png";
const deviceOnline = defineComponent({
	setup() {
		const slot = {
			title: () => {
				return (
					<div style="display: flex;">
						<div class="card-title-select active">今日</div>
						<div class="card-title-select">昨日</div>
					</div>
				);
			}
		};
		return () => {
			return (
				<CardList titleHeight="58px" icon={img7} title="在线设备" v-slots={slot}>
					<div class="card-select">
						<span class="value">12364</span>
						<span class="desc">昨日同期在线设备</span>
						<span class="num-label-up">+ 10</span>
					</div>
					<div class="card-echarts">
						<ElProgress percentage={30} color="#04BE74" showText={false} strokeWidth={8} />
					</div>
					<div class="card-footer">
						<span>本月新增设备</span>
						<span class="num">100台</span>
					</div>
				</CardList>
			);
		};
	}
});
// 设备在线率
import img2 from "@/assets/images/iot/device/deviceInfo/2.png";
const deviceOnlineRate = defineComponent({
	setup() {
		const deviceCountEcharts = ref<HTMLElement>();
		const color = [getStyleVariable()];
		onMounted(() => {
			let myChart: echarts.ECharts = echarts.init(deviceCountEcharts.value as HTMLElement);
			let option: echarts.EChartsOption = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#6a7985"
						}
					}
				},
				grid: {
					left: -28,
					right: 0,
					bottom: -10,
					top: 10,
					containLabel: true
				},
				xAxis: [
					{
						show: false,
						type: "category",
						boundaryGap: false,
						data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
						axisLabel: {
							color: "#a1a1a1"
						}
					}
				],
				yAxis: [
					{
						show: false,
						type: "value",
						axisLabel: {
							color: "#a1a1a1"
						}
					}
				],
				color: color,
				series: [
					{
						name: "设备总数",
						type: "line",
						stack: "Total",
						areaStyle: {
							opacity: 0.2
						},
						lineStyle: {
							width: 3
						},
						showSymbol: false,
						smooth: true,
						emphasis: {
							focus: "series"
						},
						data: [120, 132, 101, 134, 90, 230, 210]
					}
				]
			};
			useEcharts(myChart, option);
		});
		const slot = {
			title: () => {
				return <div class="card-title-select active">今日</div>;
			}
		};
		return () => {
			return (
				<CardList titleHeight="58px" icon={img2} title="设备在线率" v-slots={slot}>
					<div class="card-select">
						<span class="value">12364</span>
						<span class="desc">较昨日同期</span>
						<span class="num-label-up">+ 10</span>
					</div>
					<div ref={deviceCountEcharts} class="card-echarts"></div>
					<div class="card-footer">
						<span>昨日同期在线率</span>
						<span class="num">66.%</span>
					</div>
				</CardList>
			);
		};
	}
});
// 离线设备
import img8 from "@/assets/images/iot/device/deviceInfo/8.png";
const deviceOffline = defineComponent({
	setup() {
		const slot = {
			title: () => {
				return (
					<div style="display: flex;">
						<div class="card-title-select active">今日</div>
						<div class="card-title-select">昨日</div>
					</div>
				);
			}
		};
		return () => {
			return (
				<CardList titleHeight="58px" icon={img8} title="在线设备" v-slots={slot}>
					<div class="card-select">
						<span class="value">12364</span>
						<span class="desc">较上一日</span>
						<span class="num-label-up">+ 10</span>
					</div>
					<div class="card-echarts">
						<ElProgress percentage={30} color="#EEAE00" showText={false} strokeWidth={8} />
					</div>
					<div class="card-footer">
						<span>昨日同期离线设备</span>
						<span class="num">100台</span>
					</div>
				</CardList>
			);
		};
	}
});
// 主体
import img17 from "@/assets/images/iot/device/deviceInfo/17.png";
import DialogBox from "@/components/DialogBox";
import tableList from "@/components/TableList/index";
import { RouterPath } from "@/enums/routerPath";
import { ElDropdown, ElDropdownItem, ElDropdownMenu, ElTableColumn } from "element-plus";
const cardTable = defineComponent({
	components: {
		tableList
	},
	setup() {
		const router = useRouter();
		let data = reactive({
			tableColumn: [
				{ label: "设备名称", prop: "name" },
				{ label: "在线状态", prop: "name" },
				{ label: "设备SN", width: 200, prop: "SN", sortable: true },
				{ label: "末次交互", prop: "name", sortable: true },
				{ label: "网关", prop: "name" },
				{ label: "同步", prop: "name" },
				{ label: "协议", prop: "name" },
				{ label: "变量个数", prop: "name" }
			],
			tableData: [
				{ name: "设备1", SN: "SN1001" },
				{ name: "设备2", SN: "SN1002" },
				{ name: "设备3", SN: "SN1003" },
				{ name: "设备3", SN: "SN1004" },
				{ name: "设备3", SN: "SN1005" }
			],
			tableMode: "list",
			setting: {
				titleIcon: img17, // 图标
				titleKey: "name", // 标题字段
				subtitleKey: "SN", // 副标题字段
				subtitleName: "设备序列号：",
				selection: true // 是否复选框
			}
		});
		const slot = {
			dropdown: () => {
				return (
					<ElDropdownMenu>
						<ElDropdownItem>操作1</ElDropdownItem>
					</ElDropdownMenu>
				);
			}
		};
		// 操作按钮
		const slotBtn = {
			default: (scope: any) => {
				return (
					<>
						<ElButton
							link
							type="primary"
							onClick={() => {
								handleFn("details", scope);
							}}
						>
							详情
						</ElButton>
						<ElButton
							link
							type="danger"
							onClick={() => {
								handleFn("del", scope);
							}}
						>
							删除
						</ElButton>
					</>
				);
			}
		};
		const showCardTotal = ref(true);
		const searchForm = reactive<any>({});
		const addDeviceDialog = reactive<any>({
			visible: false
		});
		const cardSlot = {
			footer: (el: any) => {
				return slotBtn.default(el);
			},
			content: () => {
				return (
					<div class="flex">
						<div class="flex-1">
							<div class="text-center title">1111</div>
							<div class="text-center value">在线状态</div>
						</div>
						<div class="flex-1">
							<div class="text-center title">1111</div>
							<div class="text-center value">在线状态</div>
						</div>
						<div class="flex-1 text-center">
							<div class="text-center title">1111</div>
							<div class="text-center value">在线状态</div>
						</div>
					</div>
				);
			}
		};
		const handleFn = function (fn: String, row?: any) {
			switch (fn) {
				case "details":
					router.push({ path: RouterPath.deviceDetail });
					break;
				case "del":
					data.tableMode = row;
				case "switchList":
					data.tableMode = row;
					break;
				case "add":
					addDeviceDialog.visible = true;
					break;
			}
		};
		return () => {
			return (
				<div class="deviceInfo-module">
					<DialogBox title="添加设备" v-model:visible={addDeviceDialog.visible}>
						<div>填写设备基本信息</div>
						<div>选择设备网关</div>
						<div>根据设备网关，生成设备schema、profile</div>
					</DialogBox>
					<div v-show={showCardTotal.value} class="deviceInfo-module-top-card">
						<deviceCount></deviceCount>
						<deviceOnline></deviceOnline>
						<deviceOnlineRate></deviceOnlineRate>
						<deviceOffline></deviceOffline>
					</div>
					<div class={`deviceInfo-module-table ${showCardTotal ? "" : "no-card-total"}`}>
						<div class="deviceInfo-table">
							<div class="deviceInfo-table-search shadow-sm">
								设备名称：
								<ElInput class="em-input-140 split" v-model={searchForm.search} />
								设备SN：
								<ElInput class="em-input-140 split" v-model={searchForm.search} />
								设备分组：
								<ElSelect class="em-input-140 split" v-model={searchForm.search} />
								设备状态：
								<ElSelect class="em-input-140 split" />
								<ElButton type="primary" class="iconfont iconsearch">
									搜索
								</ElButton>
								<ElButton>重置</ElButton>
							</div>
							<div class="deviceInfo-table-content">
								<div class="table-btn">
									<ElButton type="primary" onClick={() => handleFn("add")} class="iconfont iconplus1">
										添加
									</ElButton>
									<ElButton>删除</ElButton>
									<ElButton>同步</ElButton>
									<ElButton>设备分组</ElButton>
									<ElDropdown v-slots={slot}>
										<el-button type="primary" plain>
											更多操作<span class="iconfont iconchevron-down pl-1"></span>
										</el-button>
									</ElDropdown>
									<div class="btn-right-icon">
										<i
											class={`iconfont iconlist1 ${data.tableMode == "list" ? "active" : ""}`}
											title="列表模式"
											onClick={() => {
												handleFn("switchList", "list");
											}}
										/>
										<i
											class={`iconfont icongrid1 ${data.tableMode == "card" ? "active" : ""}`}
											title="卡片模式"
											onClick={() => {
												handleFn("switchList", "card");
											}}
										/>
									</div>
								</div>
								<div class="table-content">
									<tableList
										mode={data.tableMode}
										data={data.tableData}
										total={20}
										column={data.tableColumn}
										setting={data.setting}
										cardSlot={cardSlot}
										selectionChange={(a: any) => {
											console.log(a, 11111111);
										}}
										onPageChange={(index: Number, size: Number) => {
											console.log(index, size);
										}}
									>
										<ElTableColumn type="selection" />
										{data.tableColumn.map((e: any) => {
											return <ElTableColumn label={e.label} prop={e.prop} sortable={e.sortable} />;
										})}
										<ElTableColumn label="操作" v-slots={slotBtn}></ElTableColumn>
									</tableList>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
export default cardTable;
